<script setup lang="ts">
import { ArrowDownBold } from '@element-plus/icons-vue'
import type { Props, Emits } from './utils/types'
const $props = defineProps<Props>()

const $emit = defineEmits<Emits>()

function handleChangeOpen() {
    $emit('update:modelValue', !$props.modelValue)
}
</script>

<template>
    <div class="pull-down" :class="{ 'is-open': modelValue }" @click="handleChangeOpen">
        <el-icon color="#A9A9A9">
            <ArrowDownBold />
        </el-icon>
    </div>
</template>

<style lang="scss" scoped>
.pull-down {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}

.is-open {
    transform: rotate(180deg);
}
</style>